<template>
    <div class="register-container">
        <!-- 注册内容 -->
        <div class="register">
            <h3>注册新用户
                <span class="go">我有账号，去
                     <router-link class="login" to="/login">登陆</router-link>
                </span>
            </h3>
            <el-form :model="DataForm" :rules="rules" ref="DataForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="DataForm.username" placeholder="请输入用户名(字母或数字)" :maxlength="6" show-word-limit
                              clearable prefix-icon='el-icon-user-solid' :style="{width: '50%'}"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="DataForm.phone" placeholder="请输入手机" clearable :style="{width: '50%'}"
                              prefix-icon='el-icon-mobile-phone' ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="DataForm.password"  show-password :maxlength="16" :style="{width: '50%'}"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="ralePassword">
                    <el-input v-model="DataForm.ralePassword" show-password :maxlength="16" :style="{width: '50%'}"></el-input>
                </el-form-item>
            </el-form>
            <div class="controls">
                <input name="m1" type="checkbox" :checked="agree">
                <span>同意协议并注册《好未来用户协议》</span>
            </div>
            <div class="btn">
                <Vcode
                        :show="isShow"
                        @success="success"
                        @close="close"
                />
                <button @click="submit">完成注册</button>
            </div>
        </div>

        <!-- 底部 -->
        <div class="copyright">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>联系客服</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>手机尚品汇</li>
                <li>销售联盟</li>
                <li>尚品汇社区</li>
            </ul>
            <div class="address">地址：广东省广州市从化区广从南路548号广州大学华软软件学院</div>
            <div class="beian">粤ICP备548号
            </div>
        </div>
    </div>
</template>

<script>
    import {getRegister} from '@/api/index'
    import store from '../store'
    import Vcode from "vue-puzzle-vcode";

    export default {
        name: 'Register',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输出密码'));
                } else {
                    if (this.DataForm.ralePassword !== '') {
                        this.$refs.DataForm.validateField('ralePassword');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输出密码'));
                } else if (value !== this.DataForm.password) {
                    callback(new Error('两次输出密码不统一!'));
                } else {
                    callback();
                }
            };
            return {
                isShow: false, // 验证码模态框是否出现
                changePwdDialog:false,//批改明码弹框
                agree:true,
                DataForm: {
                    password: '',
                    ralePassword:'',
                    username: undefined,
                    phone: undefined,
                    uuid:undefined
                },
                rules: {
                    phone: [{
                        required: true,
                        validator: this.checkPhone,
                        trigger: 'blur',
                    }],
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    password: [
                        { required: true, message: '请输出明码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    ralePassword:[
                        { required: true, message: '请确认明码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur', required: true }
                    ],
                }
            }
        },
        components:{
            Vcode
        },
        methods: {
            submit(){
                this.isShow = true;
            },
            // 用户通过了验证
            success(msg){
                this.isShow = false; // 通过验证后，需要手动隐藏模态框
                this.DataForm.uuid=store.state.uuid_token;
                getRegister(this.DataForm).then(response => {
                    if (response.code === 200) {
                        this.RightMessage(this, '注册成功', response.message, 'success')
                        this.$router.push({path:'/login'})
                    } else {
                        this.resetFormData();
                        this.NormalMsg(this, response.message, 'error')
                    }
                })
            },
            // 用户点击遮罩层，应该关闭模态框
            close(){
                this.isShow = false;
            },
            resetFormData() {
                this.DataForm.username = undefined
                this.DataForm.password = undefined
                this.DataForm.ralePassword = undefined
                this.DataForm.phone = undefined
            },
        }

    }
</script>

<style lang="less" scoped>
    .register-container {
        .register {
            width: 550px;
            height: 485px;
            border: 1px solid rgb(223, 223, 223);
            margin: 0 auto;

            h3 {
                background: #ececec;
                margin: 0;
                padding: 6px 15px;
                color: #333;
                border-bottom: 1px solid #dfdfdf;
                font-size: 20.04px;
                line-height: 30.06px;

                span {
                    font-size: 14px;
                    float: right;

                    a {
                        color: #e1251b;
                    }
                }
            }

            div:nth-of-type(1) {
                margin-top: 15px;
            }

            .content {
                margin-bottom: 18px;
                position: relative;

                label {
                    text-align: right;
                    display: inline-block;
                }

                img {
                    vertical-align: sub;
                }
            }

            .controls {
                text-align: center;
                position: relative;

                input {
                    vertical-align: middle;
                }

                .error-msg {
                    position: absolute;
                    top: 100%;
                    left: 495px;
                    color: red;
                }
            }

            .btn {
                text-align: center;
                margin: 17px 0 0 55px;

                button {
                    outline: none;
                    width: 270px;
                    height: 36px;
                    background: #e1251b;
                    color: #fff !important;
                    display: inline-block;
                    font-size: 16px;
                }
            }
        }

        .copyright {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            line-height: 24px;

            ul {
                li {
                    display: inline-block;
                    border-right: 1px solid #e4e4e4;
                    padding: 0 20px;
                    margin: 15px 0;
                }
            }
        }
    }
</style>
